<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:87:"D:\yinni\newwamp\wamp64\www\fire_lot\public/../application/admin\view\coring\index.html";i:1505436112;s:81:"D:\yinni\newwamp\wamp64\www\fire_lot\public/../application/admin\view\layout.html";i:1505441464;}*/ ?>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>消防监测预警平台</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <!-- 	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" /> -->
    <link href="artisan_plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
    <link href="artisan_plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="artisan_plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="artisan_css/animate.min.css" rel="stylesheet" />
    <link href="artisan_css/style.min.css" rel="stylesheet" />
    <link href="artisan_css/style-responsive.min.css" rel="stylesheet" />
    <link href="artisan_css/theme/red.css" rel="stylesheet" id="theme" />

    <!-- ================== END BASE CSS STYLE ================== -->
    <!-- ================== BEGIN PAGE CSS ================== -->
    <style type="text/css">
    .has-sub p{
        font-size: 15px;
    }
    .sub-menu a{
        font-size: 14px;
        font-weight: bold;
    }  
    .breadcrumb>li{
        font-size: 14px;
    } 
    .panel-heading .panel-title{
        font-size: 14px;
        font-weight: 12px;
    }     
    </style>
    
<!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
<link rel="stylesheet" href="/static/Extra/css/coring.css">
<!-- ================== END PAGE LEVEL STYLE ================== -->

    <!-- ================== END PAGE CSS ================== -->
</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <!-- begin #header -->
    <div id="header" class="header navbar navbar-default navbar-fixed-top">
        <!-- begin container-fluid -->
        <div class="container-fluid">
            <!-- begin mobile sidebar expand / collapse button -->
            <div class="navbar-header">
                <a href="<?php echo url('admin/Index/index'); ?>" class="navbar-brand"><span class="navbar-logo"></span> 消防监测预警平台</a>
                <button type="button" class="navbar-toggle" data-click="sidebar-toggled">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- end mobile sidebar expand / collapse button -->

            <!-- begin header navigation right -->
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form full-width">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入关键字进行检索" />
                            <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14">
                        <i class="fa fa-bell-o"></i>
                        <span class="label">5</span>
                    </a>
                    <ul class="dropdown-menu media-list pull-right animated fadeInDown">
                        <li class="dropdown-header">Notifications (5)</li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="media-left"><i class="fa fa-bug media-object bg-red"></i></div>
                                <div class="media-body">
                                    <h6 class="media-heading">Server Error Reports</h6>
                                    <div class="text-muted f-s-11">3 minutes ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="media-left"><img src="artisan_img/user-12.jpg" class="media-object" alt="" /></div>
                                <div class="media-body">
                                    <h6 class="media-heading">John Smith</h6>
                                    <p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
                                    <div class="text-muted f-s-11">25 minutes ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="media-left"><img src="artisan_img/user-12.jpg" class="media-object" alt="" /></div>
                                <div class="media-body">
                                    <h6 class="media-heading">Olivia</h6>
                                    <p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
                                    <div class="text-muted f-s-11">35 minutes ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="media-left"><i class="fa fa-plus media-object bg-green"></i></div>
                                <div class="media-body">
                                    <h6 class="media-heading"> New User Registered</h6>
                                    <div class="text-muted f-s-11">1 hour ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="media-left"><i class="fa fa-envelope media-object bg-blue"></i></div>
                                <div class="media-body">
                                    <h6 class="media-heading"> New Email From John</h6>
                                    <div class="text-muted f-s-11">2 hour ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="dropdown-footer text-center">
                            <a href="javascript:;">View more</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown navbar-user">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="artisan_img/user-12.jpg" alt="" />
                        <span class="hidden-xs"><?php echo \think\Session::get('userinfo')['username']; ?></span> <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu animated fadeInLeft">
                        <li class="arrow"></li>
                        <li><a href="<?php echo url('/Admin/Index/showuser',['id' => \think\Session::get('userinfo')['id']]); ?>" style="font-size: 14px;"><i class="fa fa-gear"></i> 查看信息</a></li>
                        <li><a href="<?php echo url('Admin/Login/logout'); ?>" style="font-size: 14px;"><i class="fa fa-power-off"></i> 退出</a></li>
                    </ul>
                </li>
            </ul>
            <!-- end header navigation right -->
        </div>
        <!-- end container-fluid -->
    </div>
    <!-- end #header -->
    <!-- begin #sidebar -->
    <div id="sidebar" class="sidebar">
        <!-- begin sidebar scrollbar -->
        <div data-scrollbar="true" data-height="100%">
            <!-- begin sidebar user -->
            <ul class="nav">
                <li class="nav-profile">
                    <div class="image">
                        <a href="javascript:;"><img src="artisan_img/user-12.jpg" alt="" /></a>
                    </div>
                    <div class="info">
                        <?php echo \think\Session::get('userinfo')['username']; ?>
                        <small>用户角色名</small>
                    </div>
                </li>
            </ul>
            <!-- end sidebar user -->
            <!-- begin sidebar nav -->
            <ul class="nav">
                <li class="has-sub">
                    <a href="<?php echo url('/admin/index/index'); ?>">
                        <i class="fa fa-laptop"></i>
                        <p>首页</p>
                    </a>
                </li>

                <li class="has-sub">
                    <a href="javascript:;">
                        <b class="caret pull-right"></b>
                        <i class="fa fa-map-marker"></i>
                        <p>地图定位</p>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="<?php echo url('/admin/location/location'); ?>">高德地图</a></li>
                        <li><a href="<?php echo url('admin/position/index'); ?>">百度地图api</a></li>
                    </ul>
                </li>
                <li class="has-sub">
                    <a href="javascript:;">
                        <b class="caret pull-right"></b>
                        <i class="fa fa-align-left"></i>
                        <p>实时监测</p>
                    </a>
                    <ul class="sub-menu">
                        <li class="has-sub">
                            <a href="javascript:;">
                                <b class="caret pull-right"></b>
                                1分厂
                            </a>
                            <ul class="sub-menu">
                                <li class="has-sub">
                                    <a href="javascript:;">
                                        <b class="caret pull-right"></b>
                                        1车间
                                    </a>
                                    <ul class="sub-menu">
                                        <li><a href="<?php echo url('admin/coring/index'); ?>">1工段</a></li>
                                        <li><a href="javascript:;">2工段</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:;">2车间</a></li>
                                <li><a href="javascript:;">3车间</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:;">2分厂</a></li>
                        <li><a href="javascript:;">3分厂</a></li>
                    </ul>
                </li>
                <li class="has-sub">
                    <a href="javascript:;">
                        <b class="caret pull-right"></b>
                        <i class="fa fa-medkit"></i>
                        <p>报警响应</p>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="<?php echo url('admin/Alarm/alarmAnswer'); ?>">报警信息记录</a></li>
                    </ul>
                </li>
                <li class="has-sub">
                    <a href="javascript:;">
                        <b class="caret pull-right"></b>
                        <i class="fa fa-area-chart"></i>
                        <p>历史查询</p>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="<?php echo url('/admin/History/query'); ?>">查询</a></li>
                    </ul>
                </li>
                <li class="has-sub">
                    <a href="javascript:;">
                        <b class="caret pull-right"></b>
                        <i class="fa fa-user"></i>
                        <p>用户管理</p>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="<?php echo url('admin/Index/showuser',['id' => \think\Session::get('userinfo')['id']]); ?>">当前用户信息</a></li>
                        <li><a href="<?php echo url('admin/Users/showuser'); ?>">所有用户</a></li>
                    </ul>
                </li>
                <li class="has-sub">
                    <a href="javascript:;">
                        <b class="caret pull-right"></b>
                        <i class="fa fa-cogs"></i>
                        <p>系统管理</p>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="<?php echo url('/admin/system/monitor_define'); ?>">测点定义</a></li>
                        <li><a href="<?php echo url('admin/alarm/alarmSetting'); ?>">报警设置</a></li>
                        <li><a href="<?php echo url('admin/rolers/showrole'); ?>">角色管理</a></li>
                        <li><a href="<?php echo url('admin/action/showact'); ?>">权限管理</a></li>

                    </ul>
                </li>
                <li class="has-sub">
                    <a href="javascript:;">
                        <b class="caret pull-right"></b>
                        <i class="fa fa-key"></i>
                        <p>系统说明</p>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="login.html">Login</a></li>
                        <li><a href="login_v2.html">Login v2</a></li>
                        <li><a href="login_v3.html">Login v3</a></li>
                        <li><a href="register_v3.html">Register v3</a></li>
                    </ul>
                </li>



                <!-- begin sidebar minify button -->
                <li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
                <!-- end sidebar minify button -->
            </ul>
            <!-- end sidebar nav -->
        </div>
        <!-- end sidebar scrollbar -->
    </div>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->
    <!-- begin #content -->
    
<div class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="<?php echo url('admin/Index/index'); ?>">首页</a></li>
        <li><a href="javascript:;">实时监测</a></li>
        <li class="active"></li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">实时监测
        <small>动态监测回路信息</small>
    </h1>
    <!-- end page-header -->
    <div class="col-md-12">
        <!-- begin panel -->
        <div class="panel panel-inverse panel-with-tabs" data-sortable-id="ui-unlimited-tabs-1">
            <div class="panel-heading p-0">
                <div class="panel-heading-btn m-r-10 m-t-10">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-expand"><i
                            class="fa fa-expand"></i></a>
                </div>
                <!-- begin nav-tabs -->
                <div class="tab-overflow">
                    <ul class="nav nav-tabs nav-tabs-inverse">
                        <li class="prev-button"><a href="javascript:;" data-click="prev-tab" class="text-success"><i
                                class="fa fa-arrow-left"></i></a></li>
                        <li class="active"><a href="#nav-tab-1" data-toggle="tab">01电气室</a></li>
                        <li class=""><a href="#nav-tab-2" data-toggle="tab">02电气室</a></li>
                        <li class=""><a href="#nav-tab-3" data-toggle="tab">03电气室</a></li>
                        <li class=""><a href="#nav-tab-4" data-toggle="tab">04电气室</a></li>
                        <li class="next-button"><a href="javascript:;" data-click="next-tab" class="text-success"><i
                                class="fa fa-arrow-right"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="nav-tab-1">
                    <!-- <div id="main" style="width: 100%;height:400px;"></div> -->
                    <div id="allmap"></div>
                    <h3 class="m-t-10"></h3>
                </div>
                <div class="tab-pane fade" id="nav-tab-2">
                    <div id="allmap"></div>
                    <h3 class="m-t-10">Nav Tab 2</h3>
                    <p>
                    </p>
                    <p>
                    </p>
                </div>
                <div class="tab-pane fade" id="nav-tab-3">
                    <h3 class="m-t-10">Nav Tab 3</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Integer ac dui eu felis hendrerit lobortis. Phasellus elementum, nibh eget adipiscing porttitor,
                        est diam sagittis orci, a ornare nisi quam elementum tortor.
                        Proin interdum ante porta est convallis dapibus dictum in nibh.
                        Aenean quis massa congue metus mollis fermentum eget et tellus.
                        Aenean tincidunt, mauris ut dignissim lacinia, nisi urna consectetur sapien,
                        nec eleifend orci eros id lectus.
                    </p>
                    <p>
                        Aenean eget odio eu justo mollis consectetur non quis enim.
                        Vivamus interdum quam tortor, et sollicitudin quam pulvinar sit amet.
                        Donec facilisis auctor lorem, quis mollis metus dapibus nec. Donec interdum tellus vel mauris
                        vehicula,
                        at ultrices ex gravida. Maecenas at elit tincidunt, vulputate augue vitae, vulputate neque.
                        Aenean vel quam ligula. Etiam faucibus aliquam odio eget condimentum.
                        Cras lobortis, orci nec eleifend ultrices, orci elit pellentesque ex, eu sodales felis urna nec
                        erat.
                        Fusce lacus est, congue quis nisi quis, sodales volutpat lorem.
                    </p>
                </div>
            </div>

        </div>
    </div>

    <div class="col-md-12">
        <div class="panel panel-inverse panel-with-tabs" data-sortable-id="ui-unlimited-tabs-1">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                       data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                       data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                       data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                       data-click="panel-remove"><i class="fa fa-times"></i></a>
                </div>
                <h4 class="panel-title">实时电气室回路监测信息</h4>
            </div>
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
                当前电气室所有回路详情。电流温度颜色变红即为报警状态！！3s刷新一次，或者点击手动刷新。
            </div>
            <button onclick="alltimedata(this)" class="btn btn-primary">点击刷新</button>
            <div class="realtime-box" id="realtime-box">

            </div>
        </div>
    </div>


</div>


    <!-- end #content -->
    <!-- begin theme-panel -->
    <div class="theme-panel">
        <a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
        <div class="theme-panel-content">
            <h5 class="m-t-0">Color Theme</h5>
            <ul class="theme-list clearfix">
                <li class="active"><a href="javascript:;" class="bg-green" data-theme="default" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Default">&nbsp;</a></li>
                <li><a href="javascript:;" class="bg-red" data-theme="red" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Red">&nbsp;</a></li>
                <li><a href="javascript:;" class="bg-blue" data-theme="blue" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Blue">&nbsp;</a></li>
                <li><a href="javascript:;" class="bg-purple" data-theme="purple" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Purple">&nbsp;</a></li>
                <li><a href="javascript:;" class="bg-orange" data-theme="orange" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Orange">&nbsp;</a></li>
                <li><a href="javascript:;" class="bg-black" data-theme="black" data-click="theme-selector" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Black">&nbsp;</a></li>
            </ul>
            <div class="divider"></div>
            <div class="row m-t-10">
                <div class="col-md-5 control-label double-line">Header Styling</div>
                <div class="col-md-7">
                    <select name="header-styling" class="form-control input-sm">
                        <option value="1">default</option>
                        <option value="2">inverse</option>
                    </select>
                </div>
            </div>
            <div class="row m-t-10">
                <div class="col-md-5 control-label">Header</div>
                <div class="col-md-7">
                    <select name="header-fixed" class="form-control input-sm">
                        <option value="1">fixed</option>
                        <option value="2">default</option>
                    </select>
                </div>
            </div>
            <div class="row m-t-10">
                <div class="col-md-5 control-label double-line">Sidebar Styling</div>
                <div class="col-md-7">
                    <select name="sidebar-styling" class="form-control input-sm">
                        <option value="1">default</option>
                        <option value="2">grid</option>
                    </select>
                </div>
            </div>
            <div class="row m-t-10">
                <div class="col-md-5 control-label">Sidebar</div>
                <div class="col-md-7">
                    <select name="sidebar-fixed" class="form-control input-sm">
                        <option value="1">fixed</option>
                        <option value="2">default</option>
                    </select>
                </div>
            </div>
            <div class="row m-t-10">
                <div class="col-md-5 control-label double-line">Sidebar Gradient</div>
                <div class="col-md-7">
                    <select name="content-gradient" class="form-control input-sm">
                        <option value="1">disabled</option>
                        <option value="2">enabled</option>
                    </select>
                </div>
            </div>
            <div class="row m-t-10">
                <div class="col-md-5 control-label double-line">Content Styling</div>
                <div class="col-md-7">
                    <select name="content-styling" class="form-control input-sm">
                        <option value="1">default</option>
                        <option value="2">black</option>
                    </select>
                </div>
            </div>
            <div class="row m-t-10">
                <div class="col-md-12">
                    <a href="#" class="btn btn-inverse btn-block btn-sm" data-click="reset-local-storage"><i class="fa fa-refresh m-r-3"></i> Reset Local Storage</a>
                </div>
            </div>
        </div>
    </div>
    <!-- end theme-panel -->
    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
    <audio id="bgmusic">
        <source = src="/static/audio/4611.mp3" type="audio/mp3">
    </audio>
</div>
<!-- end page container -->
<!-- ================== BEGIN BASE JS ================== -->
<script src="artisan_plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="artisan_plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="artisan_plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="artisan_plugins/bootstrap/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="assets/crossbrowserjs/html5shiv.js"></script>
<script src="assets/crossbrowserjs/respond.min.js"></script>
<script src="assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->
<script src="artisan_plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="artisan_plugins/jquery-cookie/jquery.cookie.js"></script>
<script src="artisan_plugins/pace/pace.min.js"></script>
<!-- ================== END BASE JS ================== -->
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="artisan_plugins/gritter/js/jquery.gritter.js"></script>
<script src="artisan_plugins/flot/jquery.flot.min.js"></script>
<script src="artisan_plugins/flot/jquery.flot.time.min.js"></script>
<script src="artisan_plugins/flot/jquery.flot.resize.min.js"></script>
<script src="artisan_plugins/flot/jquery.flot.pie.min.js"></script>
<script src="artisan_plugins/sparkline/jquery.sparkline.js"></script>
<script src="artisan_plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="artisan_plugins/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="artisan_plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="artisan_js/apps.min.js"></script>
<script>
    $(document).ready(function () {
        App.init();
        //侧边栏active添加
        function sidebarActive() {
            if (window.location.pathname == '/admin/index/index.html') {
                $('li.has-sub').eq(0).addClass("active");
            }
            $('ul.sub-menu').each(function () {
                $(this).children().each(function () {
                    if ($(this).children().attr("href") == window.location.pathname) {
                        $(this).addClass("active");
                        $(this).parents('li').addClass("active");
                    }
                })
            });
        }
        sidebarActive();
        //侧边栏实时监测动态添加
        function sidebarAdd() {
            $.ajax({
                type:'post',
                url:'',
                data:{},
                success:function () {
                    
                }
            })
        }

        $(function () {
            // 定时刷新
            setTimeout(function () {
                    alltimedata();
                },
                200);//setTimeout 程序执行后200毫秒执行push，但是仅此一次。
            setInterval(function () {
                    alltimedata();
                },
                5000);
            // 利用ajax动态加载实时监测信息，实现定时及页面局部刷新
            function alltimedata() {
                $.ajax({
                    url: '/admin/coring/getdata',
                    data: {},
                    type: 'get',
                    datatype: 'json',
                    async: true,
                    success: function (data) {
                        var status = eval("(" + data + ")");
                        var isAlarm = 0;
                        for(var i=0; i<status.length;i++) {
                            // alert(status[i].status);
                            if(status[i].status == 2) {
                                isAlarm = 1;
                            }      
                        }
                            if(isAlarm == 1) {
                            var audio = document.getElementById("bgmusic");
                            audio.play();                                  
                            }

                    }
                });
            }
    });

    });
</script>



<script src="/static/Extra/js/echarts.min.js"></script>

<script>
    $(document).ready(function () {
//        渲染实时监测div
        $(function () {
            // 定时刷新
            setTimeout(function () {
                    alltimedata();
                },
                200);//setTimeout 程序执行后200毫秒执行push，但是仅此一次。
            setInterval(function () {
                    alltimedata();
                },
                5000);
            // 利用ajax动态加载实时监测信息，实现定时及页面局部刷新
            function alltimedata() {
                $.ajax({
                    url: '/admin/coring/getdata',
                    data: {},
                    type: 'get',
                    async: true,
                    datatype: 'json',
                    success: function (data) {
                        var finalarr = eval("(" + data + ")");
                        var html = "";
                        $(".realtime-box").html(html);
                        for (var i = 0; i < finalarr.length; i++) {
                            //填充属性
                            var loop_name = finalarr[i].loop_name;
                            var smoke_status;
                            if(finalarr[i].smoke) {
                                smoke_status = '气体异常';
                            }else {
                                smoke_status = '正常';
                            }
                            var fire_status;
                            if(finalarr[i].fire) {
                                fire_status = '存在明火';
                            }else{
                                fire_status = '正常';
                            }
                            var near_infrared_status;
                            if(finalarr[i].near) {
                                near_infrared_status = '图像异常';
                            }else {
                                near_infrared_status = '正常';
                            }
                            var status = function (status) {
                                switch (status) {
                                    case 0:
                                        return {'statusClass': 'tag-error', 'status': '离线'};
                                    case 1:
                                        return {'statusClass': 'tag-default', 'status': '在线'};
                                    case 2:
                                        return {'statusClass': 'tag-warning', 'status': '报警'};
                                }
                            };
                            var resi_current = finalarr[i].resi_current;
                            var cable_temp = finalarr[i].cable_temp;
                            var location = finalarr[i].location;
                            //填充模板
                            html += "<div class='realtime-item'>"
                                + "<div class=\"monitor-tag " + status(finalarr[i].status).statusClass + "\"></div>"
                                + "<div class='monitor-body'>"
                                + "<h4>" + loop_name + "</h4>"
                                + "<div>"
                                + "<label>当前状态：</label>"
                                + "<p>" + status(finalarr[i].status).status + "</p><br>"
                                + "<label>安装位置：</label>"
                                + "<p>" + location + "电气室</p><br>"                            
                                + "<label>实时电流：</label>"
                                + "<p>" + resi_current + "mA</p><br>"
                                + "<label>实时温度：</label>"
                                + "<p>" + cable_temp + "℃</p><br>"
                                + "<label >火灾烟雾检测：</label>"
                                + "<p>" + smoke_status + "</p><br>"
                                + "<label>火灾近红外检测：</label>"
                                + "<p>" + near_infrared_status + "</p><br>"
                                + "<label>火灾检测：</label>"
                                + "<p>" + fire_status + "</p><br>"                        
                                + "</div>"
                                + "</div></div>";
                        }
                        $(".realtime-box").html(html)
                    }
                });
            }
        });


//         //图表
//         $(function () {
//             var date = new Date();
//             var data = [
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]}
//             ];
//             var convertData = function (data) {
//                 var res1 = [];
//                 var res2 = [];
//                 for (var i = 0; i < data.length; i++) {
//                     res1.push({
//                         value: data[i].value[0]
//                     });
//                     res2.push({
//                         value: data[i].value[1]
//                     });
//                 }
//                 return [res1, res2];
//             };
//             var historyChart = echarts.init(document.getElementById('main'));
// // 指定图表的配置项和数据
//             var option = {
//                 title: {
//                     text: '历史折线图'
//                 },
//                 tooltip: {
//                     trigger: 'axis'
//                 },
//                 toolbox: {
//                     feature: {
//                         dataZoom: {
//                             yAxisIndex: 'none'
//                         },
//                         magicType: {type: ['line', 'bar']},
//                         restore: {},
//                         saveAsImage: {}
//                     }
//                 },
//                 grid: {
//                     left: '3%',
//                     right: '4%',
// //            bottom: '15%',
//                     containLabel: false
//                 },
//                 legend: {
//                     data: ['剩余电流', '温度']
//                 },
//                 xAxis: {
//                     type: 'category',
//                     boundaryGap: false,
//                     data: (function () {
//                         var now = new Date();
//                         var res = [];
//                         var len = data.length;
//                         while (len--) {
//                             res.unshift(now.getHours() + ':' + now.getMinutes());
//                             now = new Date(now - 60000);
//                         }
//                         return res;
//                     })()
//                 },
//                 yAxis: {
//                     type: 'value'
//                 },
//                 dataZoom: [{
//                     type: 'inside',
//                     start: 0,
//                     end: 100
//                 }, {
//                     start: 0,
//                     end: 10,
//                     handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
//                     handleSize: '80%',
//                     handleStyle: {
//                         color: '#fff',
//                         shadowBlur: 3,
//                         shadowColor: 'rgba(0, 0, 0, 0.6)',
//                         shadowOffsetX: 2,
//                         shadowOffsetY: 2
//                     }
//                 }],
//                 series: [{
//                     name: '剩余电流',
//                     type: 'line',
//                     smooth: true,
//                     symbol: 'none',
//                     data: convertData(data)[0]
//                 }, {
//                     name: '温度',
//                     type: 'line',
//                     smooth: true,
//                     symbol: 'none',
//                     data: convertData(data)[1]
//                 }]
//             };
// // 使用刚指定的配置项和数据显示图表。
//             historyChart.setOption(option);
//             // TableManageTableTools.init();
//         })
    });
</script>

<!-- ================== END PAGE LEVEL JS ================== -->

